import { Button, Modal, Form, Input, message } from 'antd'
import React, { ForwardedRef, forwardRef, ForwardRefRenderFunction, useContext, useEffect, useImperativeHandle, useState } from 'react'
import { TNav } from '@type'
import { AppContext } from '@/App'
import { TStore } from '@type'
import axios from '@/http'
const NavModal: ForwardRefRenderFunction<{ showModal: Function }, { editData: TNav | undefined; search: Function }> = (
  { editData, search },
  ref: ForwardedRef<{ showModal: Function }>
) => {
  const {
    store: { status }
  } = useContext<TStore>(AppContext)
  const [isModalVisible, setIsModalVisible] = useState(false)
  const editConfig = [
    { name: 'category', label: '类别', style: { width: '50%' }, rules: [{ required: true }], disabled: true },
    { name: 'otcName', label: '导航', style: { width: '50%' }, rules: [{ required: true }] },
    { name: 'path', label: '导航路径', style: { width: '50%' }, rules: [{ required: true }] },
    { name: 'name', label: 'git地址', style: { width: '50%' }, rules: [{ required: true }] },
    {
      name: 'categoryDesc',
      label: '类别描述',
      style: { width: '100%' },
      rules: [{ required: true }],
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
      type: 'textArea',
      disabled: true
    },
    {
      name: 'otcDescribe',
      label: '导航描述',
      style: { width: '100%' },
      rules: [{ required: true }],
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
      type: 'textArea'
    },
    { name: 'otcPath', label: '导航logo', style: { width: '50%' } },
    { name: 'bgColor', label: '背景颜色', style: { width: '50%' } }
  ]
  const showModal = () => {
    setIsModalVisible(true)
  }
  const saveNav = (values: TNav) => {
    const url = editData && editData.id ? '/navigation/update' : '/navigation/add'
    axios
      .post(url, {
        ...values,
        status,
        describe: values.categoryDesc,
        id: editData?.id
      })
      .then(res => {
        if (res.data.error === -1) {
          message.success('更新成功')
          search()
          setIsModalVisible(false)
        }
      })
  }
  useImperativeHandle(ref, () => ({
    showModal
  }))
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
  }
  const onFinish = (values: any) => {
    console.log(values)
    saveNav(values)
  }
  const handleCancel = () => {
    setIsModalVisible(false)
  }
  const onReset = () => {
    form.resetFields()
  }
  const [form] = Form.useForm()
  useEffect(() => {
    onReset()
  }, [editData])

  return (
    <>
      <Modal footer={null} title="编辑导航" width={800} visible={isModalVisible} onCancel={handleCancel}>
        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} initialValues={editData}>
          <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
            {editConfig.map(item => (
              <Form.Item
                key={item.name}
                style={item.style}
                labelAlign={'right'}
                name={item.name}
                label={item.label}
                rules={item.rules}
                labelCol={item.labelCol}
                wrapperCol={item.wrapperCol}
              >
                {item.type === 'textArea' ? (
                  <Input.TextArea allowClear disabled={editData && item.disabled} />
                ) : (
                  <Input disabled={editData && item.disabled} />
                )}
              </Form.Item>
            ))}
          </div>
          <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} label={'背景图片'}>
            <img src={editData?.otcPath} alt="" width={40} height={40} style={{ border: 'none' }} />
          </Form.Item>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
export default forwardRef(NavModal)
